import { defineComponent, ref } from 'vue'
import { NAvatar, NButton, NUpload } from 'naive-ui'
import styles from './index.module.scss'
import ModUserInfoModal from '../../dialog/mod-user-info-modal'
import { useUserCenter } from './use-user-center'
import {
  uploadFileUrl,
  uploadFileHeader
} from '@/service/modules/file/upload-file'
import { format } from 'date-fns'

const UserCenterTab = defineComponent({
  name: 'UserCenterTab',
  setup() {
    const userInfo = window.$store.state.userInfo
    const showModUserInfoModalRef = ref(false)
    const keytabDownloadUrl = ref('')
    const userAccessKey = ref('')
    const {
      variables,
      getDepartmentFullName,
      updateUserHeadImg,
      genKeytab,
      getKeytab,
      genAccessKey,
      getAccessKey
    } = useUserCenter()
    //获取部门全称
    getDepartmentFullName(userInfo.departmentId)
    //修改头像
    const handleFileUploadFinish = ({ event }: { event?: ProgressEvent }) => {
      //文件上传成功后，提交修改用户头像请求
      const res = JSON.parse((event?.target as XMLHttpRequest).response)
      if (res.resp_code === 0) {
        updateUserHeadImg(res.data.url)
      } else {
        window.$message.error(res.resp_msg)
      }
    }
    //生成用户accessKey和获取用户accessKey
    const handleGenAccessKey = () => {
      genAccessKey(userAccessKey)
    }
    getAccessKey(userAccessKey)
    //生成用户keytab和获取用户下载路径
    const handleGenKeytab = () => {
      genKeytab(keytabDownloadUrl)
    }
    getKeytab(keytabDownloadUrl)
    return {
      variables,
      showModUserInfoModalRef,
      handleFileUploadFinish,
      handleGenKeytab,
      keytabDownloadUrl,
      handleGenAccessKey,
      userAccessKey
    }
  },
  methods: {
    handleModUserInfoModalShowChange() {
      this.showModUserInfoModalRef = !this.showModUserInfoModalRef
    },
    handleModUserInfoClick() {
      this.showModUserInfoModalRef = true
    }
  },
  render() {
    return (
      <div class={styles.container}>
        <div class={styles.user}>
          <div class={styles.head}>
            <NAvatar
              round
              size={80}
              lazy
              src={window.$store.state.userInfo.headImgUrl}
            />
            <div>
              <NUpload
                action={uploadFileUrl}
                headers={uploadFileHeader()}
                onFinish={this.handleFileUploadFinish}
              >
                <NButton type='info' size='tiny'>
                  {window.$t('user.uploadHeadBtn')}
                </NButton>
              </NUpload>
            </div>
          </div>
          <div class={styles.userinfo}>
            <table>
              <tbody>
                <tr>
                  <td>{window.$t('user.username')}</td>
                  <td>{window.$store.state.userInfo.username}</td>
                </tr>
                <tr>
                  <td>{window.$t('user.nickname')}</td>
                  <td>{window.$store.state.userInfo.nickname}</td>
                </tr>
                <tr>
                  <td>{window.$t('user.mobile')}</td>
                  <td>{window.$store.state.userInfo.mobile}</td>
                </tr>
                <tr>
                  <td>{window.$t('user.email')}</td>
                  <td>{window.$store.state.userInfo.email}</td>
                </tr>
                <tr>
                  <td>{window.$t('user.sex')}</td>
                  <td>
                    {window.$store.state.userInfo.sex === 0
                      ? window.$t('user.man')
                      : window.$t('user.woman')}
                  </td>
                </tr>
                <tr>
                  <td>{window.$t('user.department')}</td>
                  <td>{this.variables.departmentFullName}</td>
                </tr>
                <tr>
                  <td>{window.$t('user.roles')}</td>
                  <td>
                    {window.$store.state.userInfo.roles
                      .map((item: { name: any }) => item.name)
                      .join(',')}
                  </td>
                </tr>
                <tr>
                  <td>{window.$t('user.proRoles')}</td>
                  <td>
                    {window.$store.state.userInfo.proRoles
                      .map((item: { name: any }) => item.name)
                      .join(',')}
                  </td>
                </tr>
                <tr>
                  <td>{window.$t('common.createTime')}</td>
                  <td>
                    {format(
                      new Date(window.$store.state.userInfo.createTime),
                      'yyyy-MM-dd HH:mm:ss'
                    )}
                  </td>
                </tr>
                <tr>
                  <td colspan={2} style={'text-align:center'}>
                    <NButton
                      type='info'
                      size='tiny'
                      onClick={this.handleModUserInfoClick}
                    >
                      {window.$t('user.modUserInfoBtn')}
                    </NButton>
                    <ModUserInfoModal
                      showModal={this.showModUserInfoModalRef}
                      onModalShowChange={this.handleModUserInfoModalShowChange}
                    ></ModUserInfoModal>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class={styles.keytab}>
          <div>{window.$t('user.userKeytab')}</div>
          <div>
            <NButton type='info' size='tiny' onClick={this.handleGenKeytab}>
              {window.$t('user.genKeytabBtn')}
            </NButton>
            <NButton type='info' size='tiny'>
              <a href={this.keytabDownloadUrl}>
                {window.$t('user.downloadKeytabBtn')}
              </a>
            </NButton>
          </div>
        </div>
        <div class={styles.access_key}>
          <div>{window.$t('user.userAccessKey')}</div>
          <div>
            <strong>AccessKey:&nbsp;</strong> {this.userAccessKey}
            <NButton type='info' size='tiny' onClick={this.handleGenAccessKey}>
              {window.$t('user.resetAccessKey')}
            </NButton>
          </div>
        </div>
      </div>
    )
  }
})

export default UserCenterTab
